<template>
	<view class="detail">
		<view class="card">
			<view class="flex-between">
				<view>
					<view class="list flex" style="width: 600rpx;">
						<view class="left flex">
							<image src="/static/pos-s1.png" mode="widthFix"></image>
							起点
						</view>
						<view class="right">郑州市</view>
					</view>
					<view class="list flex" style="width: 600rpx;">
						<view class="left flex">
							<image src="/static/pos-e1.png" mode="widthFix"></image>
							终点
						</view>
						<view class="right">平顶山市</view>
					</view>
				</view>
				
				<image src="/static/arrow-both1.png" mode="widthFix" class="arrow"></image>
			</view>
			<view class="list flex">
				<view class="left flex">
					<image src="/static/pos2.png" mode="widthFix"></image>
					路线
				</view>
				<view class="right">从2010年起至2040年,用30年的时间,将全国主要省市区连接起来,形成国家网络大框架。</view>
			</view>
			<view class="list flex">
				<view class="left flex">
					<image src="/static/date.png" mode="widthFix"></image>
					时间
				</view>
				<view class="right">2021-04-30 15:30:00</view>
			</view>
			<view class="list flex">
				<view class="left flex">
					<image src="/static/chexing.png" mode="widthFix"></image>
					车型
				</view>
				<view class="right">20</view>
			</view>
			<view class="list flex">
				<view class="left flex">
					<image src="/static/chezuo.png" mode="widthFix"></image>
					余座
				</view>
				<view class="right">2座</view>
			</view>
			<view class="list flex">
				<view class="left flex">
					<image src="/static/mobile.png" mode="widthFix"></image>
					电话
				</view>
				<view class="right">13345674561</view>
			</view>
			<view class="list flex">
				<view class="left flex">
					<image src="/static/money.png" mode="widthFix"></image>
					A费
				</view>
				<view class="right">100元/座</view>
			</view>
			<view class="list flex">
				<view class="left flex">
					<image src="/static/beizhu.png" mode="widthFix"></image>
					备注
				</view>
				<view class="right">用30年的时间,将全国主要省市区连接起来</view>
			</view>
			<view class="btn flex">
				<view class="cancle flex-center">预计收益<text>150.00</text>元</view>
				<view class="edit flex-center">已2人申请</view>
			</view>
		</view>
		<view class="title">乘客信息</view>
		<view class="bottom">
			<block v-if="false">
				<view class="list flex-between" v-for="(item,index) in 5" :key="index">
					<view class="left">
						<view class="p">手机号：13345612356</view>
						<view class="p">人数：1人</view>
						<view class="p">上车点：花园路口</view>
					</view>
					<view class="right" @click="doPhone">联系</view>
				</view>
			</block>
			
			<view class="empty flex-center-column" v-else>
				暂无乘客信息
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isChecked:false
			};
		},
		onLoad(options) {

		},
		methods:{
			doPhone(phone){
				uni.showModal({
					title:'是否拨打电话？',
					confirmColor:'#4CD964',
					success:r=>{
						if(r.confirm){
							uni.makePhoneCall({
								phoneNumber:phone
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="less">
	page{
		background: #f2f3f4;
	}
	@color: #4CD964;
	.detail{
		padding: 30rpx 24rpx;
		.card{
			background: white;
			border-radius: 15rpx;
			padding: 10rpx 20rpx;
			.arrow{
				width: 50rpx;
				height:auto;
			}
			.list{
				padding: 20rpx 0;
				font-size: 30rpx;
				border-bottom: 1rpx solid #f2f3f4;
				.left{
					width: 140rpx;
					font-weight: bold;
					image{
						width: 40rpx;
						height: auto;
						margin-right: 15rpx;
					}
				}
				.right{
					width: 500rpx;
					font-size: 28rpx;
					color:#333;
				}
				text{
					font-size: 28rpx;
					color:#666;
				}
				navigator{
					color:@color
				}
			}
			.btn{
				view,navigator{
					width: 50%;
					height: 70rpx;
					color:#999;
					font-size: 30rpx;
					&.edit{
						color:@color;
						border-left: 1px solid #eee;
					}
				}
			}
		}
		.title{
			font-size: 32rpx;
			color:#888;
			line-height: 3;
		}
		.bottom{
			.list{
				background: white;
				margin-bottom: 1px;
				padding: 24rpx;
				.left{
					.p{
						font-size: 30rpx;
					}
				}
				.right{
					font-size: 32rpx;
					color:@color
				}
			}
		}
		.empty{
			height: 10vh;
			font-size: 28rpx;
			color:#999;
		}
	}
</style>
